<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <base href="<%=basePath%>">
    
    <title>projectQuality</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>


</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12">
            <div>
              <ul class="nav nav-tabs" role="tablist">
                <li id="dateLi" role="presentation" class="active" style="width: 33.333%;"><a id="aDate" href="#date" aria-controls="date" role="tab" data-toggle="tab">每日</a></li>
                <li id="monthLi" role="presentation" style="width: 33.333%;"><a id="aMonth" href="#month" aria-controls="month" role="tab" data-toggle="tab">每月</a></li>
                <li id="yearLi" role="presentation" style="width: 33.333%;"><a id="aYear" href="#year" aria-controls="year" role="tab" data-toggle="tab">每年</a></li>
              </ul>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="date">
                    <div id="dateLineContainer" style="width: 1000px;height:1300px;"></div>
                </div>
                <div role="tabpanel" class="tab-pane" id="month">
                    <div id="monthLineContainer" style="width: 1000px;height:1300px;">month</div>
                </div>
                <div role="tabpanel" class="tab-pane" id="year">
                    <div id="yearLineContainer" style="width: 1000px;height:1300px;">year</div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>




    <script type="text/javascript">
    var path = "<%=path%>";
    var myChartLine = "";
    var myChartBar = "";
    var optionLine = "";
    var optionBar = "";

    
    $(function () {

        //默认初始化日数据
        $("#aDate").trigger("click");
    });
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    $("#aDate").on("click",function() {
        initLineEchart("dateLineContainer",path+"/resource/jsonData/gcpz/dateData.json");
    }); 

    $("#aMonth").on("click",function() {
        initLineEchart("monthLineContainer",path+"/resource/jsonData/gcpz/monthData.json");
    }); 

    $("#aYear").on("click",function() {
        initLineEchart("yearLineContainer",path+"/resource/jsonData/gcpz/yearData.json");
    }); 

    /*************************初始化 line echart**************************/
    function initLineEchart(divContainer,jsonData) {

        myChartLine = echarts.init(document.getElementById(divContainer));
        optionLine = null;

        optionLine = {	
            grid:{
                top:150
            },
            title: {
                text: '工程品质监控',
                textStyle: {
                	fontSize: '26'
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: "{b0} :<br/>{a0}: {c0}%<br/>{a1}: {c1}%<br/>{a2}: {c2}%<br/>{a3}: {c3}"
            },
            legend: {
                data:['设备设施巡检率','保养计划完成率','维修完成率','其他未消事件数'],
                textStyle: {
                	fontSize: '18'
                },
                top:'60'
            },
            dataZoom: [{
                 type: 'inside',
                 realtime: true,
                 start: 60,
                 end: 100
             }],
            calculable: true,
            xAxis: {
                type: 'category',//boundaryGap: false,//取消左侧的间距
                data: [],
                axisLabel: {        
                    textStyle: {
                        fontSize:'20'
                    }
                }
            },
            yAxis: [{
                type: 'value',
                axisLabel: {
                	textStyle: {
                        fontSize:'20'
                    },
                    formatter: '{value} %'
                }
            },{
            	name : '(个)',
            	nameTextStyle: {
            		fontSize:16
            	},
                type: 'value',
                axisLabel: {
                	textStyle: {
                        fontSize:'20'
                    },
                    formatter: '{value} '
                }
            }],
            series: [{
                name:'设备设施巡检率',
                type:'line',
                smooth:true,
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            },{
                name:'保养计划完成率',
                type:'line',
                smooth:true,
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            },{
                name:'维修完成率',
                type:'line',
                smooth:true,
                data: [],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                }
            },{
                name:'其他未消事件数',
                yAxisIndex:1,
                type:'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    }
                },
                data: []
            }]
        };

        //数据加载完之前先显示一段简单的loading动画
        myChartLine.showLoading();  
        setTimeout(setLineData(jsonData) ,500);

    }

    /*************************end line echart**************************/

    /*************************初始化 line data**************************/
    function setLineData(jsonData) {
        //声明数据数组
        var categoriesArrary = new Array();
        var dataArrary1 = new Array();
        var dataArrary2 = new Array();
        var dataArrary3 = new Array();
        var dataArrary4 = new Array();

        // 异步加载数据
        $.get(jsonData).done(function (data) {
            //var bToObj=JSON.parse(data); //json字符串转json数组
            $.each(data.sbssxjl,function(index,item){
                //console.log(item);
                categoriesArrary.push(item.categories);//循环取出类别并填入类别数组
                dataArrary1.push(item.data);//循环取出数据并填入类别数组
            });

            $.each(data.byjhwcl,function(index,item){
                dataArrary2.push(item.data);
            });

            $.each(data.wxwcl,function(index,item){
                dataArrary3.push(item.data);
            });

            $.each(data.qtwxsjx,function(index,item){
                dataArrary4.push(item.data);
            });

            //console.log(categoriesArrary);
            myChartLine.hideLoading(); //隐藏加载动画
            myChartLine.setOption({//加载数据图表
                xAxis: {
                    data: categoriesArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '设备设施巡检率',
                    data: dataArrary1
                },
                {
                    // 根据名字对应到相应的系列
                    name: '保养计划完成率',
                    data: dataArrary2
                },
                {
                    // 根据名字对应到相应的系列
                    name: '维修完成率',
                    data: dataArrary3
                },
                {
                    // 根据名字对应到相应的系列
                    name: '其他未消事件数',
                    data: dataArrary4
                }]
            });
        });

        if (optionLine && typeof optionLine === "object") {
            myChartLine.setOption(optionLine, true);
        }
    }

    /*************************end line data**************************/


    </script>
</body>
</html>